import React, { forwardRef, useEffect } from 'react';
import CustomSelect from 'components/customselect';
import ImageUpload from 'components/imgupload';
import classNames from 'classnames';
import PromptInput from 'components/promptinput';
import useFormStore from 'src/context/usetypeformstore';
import ReactSwitch from 'react-switch';
import { useTranslation } from 'react-i18next';
import ExpandableSection from 'components/expandablesection';

import './style.scss';

import api from 'api/config';

const Image2VideoForm = () => {
    const state = useFormStore();
    const { setFormData } = useFormStore();
    const formData = state.video;
    const models = state.modellist.video;

    const { t, i18n } = useTranslation('home', {
        keyPrefix: 'generateleft',
    });

    const options = models.map((item) => {
        const [key, value] = Object.entries(item)[0]; // 获取第一个键值对
        return {
            key: key,
            value: value,
            label: value,
        };
    });

    const motionSpeedOptions = [
        { value: 'high', label: '图片快动' },
        { value: 'low', label: '图片慢动' },
    ];

    const styleOptions = [
        { value: 'raw', label: '减少系统自动修饰，更精准控制效果' },
        { value: 'common', label: '非raw' },
    ];

    const numOptions = [
        { value: 1, label: '1' },
        { value: 2, label: '2' },
        { value: 4, label: '4' },
    ];

    const speedOptions = [
        { value: '1', label: '快' },
        { value: '2', label: '中' },
        { value: '3', label: '慢' },
    ];

    const resolutionOptions = [
        { value: 0, label: '480p' },
        { value: 1, label: '720p' },
    ];

    const handlePromptChange = (e) => {
        setFormData('video', {
            ...formData,
            prompts: e.target.value,
        });
    };

    const handleImageUpload = (file, url) => {
        setFormData('video', {
            firstFrame: url,
        });
    };

    const handleEndImageUpload = (file, url) => {
        setFormData('video', {
            lastFrame: url,
        });
    };

    return (
        <div className="image2video-form">
            <div className="form-group">
                <p className="type-selection-title">{t('modeltitle')}</p>

                <CustomSelect
                    formType="video"
                    fieldName="version"
                    options={options}
                    className="model-select"
                    placeholder="选择模型..."
                />
            </div>
            <div className="form-group">
                <p className="type-selection-title">{t('uploadtitle')}</p>

                <ImageUpload
                    onFileChange={handleImageUpload}
                    initialImageUrl={formData.firstFrame}
                    onFileDelete={() =>
                        setFormData('video', {
                            firstFrame: '',
                        })
                    }
                />
            </div>
            <div className="form-group">
                <div className="type-selection-title type-selection-title-switch">
                    <p>
                        尾帧图<span style={{ color: '#8F91A8' }}>（可选）</span>
                    </p>
                    <div className="switch-content">
                        <p>首尾循环</p>
                        <ReactSwitch
                            checked={formData.isLoop == 1 || false}
                            onChange={(checked) => {
                                setFormData('video', {
                                    isLoop: checked == true ? 1 : 0,
                                });
                                if (checked == true) {
                                    //改变尾帧图
                                    setFormData('video', {
                                        lastFrame: formData.firstFrame,
                                    });
                                }
                            }}
                            onColor="#3F00FF"
                            offColor="#bbb"
                            handleDiameter={16} // 手柄直径
                            uncheckedIcon={false}
                            checkedIcon={false}
                            height={20}
                            width={34}
                            disabled={formData.firstFrame == ''}
                        />
                    </div>
                </div>

                <ImageUpload
                    onFileChange={handleEndImageUpload}
                    initialImageUrl={formData.lastFrame}
                    onFileDelete={() =>
                        setFormData('video', {
                            lastFrame: '',
                        })
                    }
                />
            </div>
            <div className="form-group">
                <p className="type-selection-title">{t('prompttitle')}</p>

                <PromptInput
                    value={formData.prompts}
                    onChange={handlePromptChange}
                    placeholder="输入你的提示词"
                ></PromptInput>
            </div>
            <div className="form-group">
                <p className="type-selection-title">运动速率</p>

                <CustomSelect
                    formType="video"
                    fieldName="motionSpeed"
                    options={motionSpeedOptions}
                    className="model-select"
                    placeholder="选择运动速率"
                />
            </div>

            <div className="form-group">
                <ExpandableSection title="更多设置">
                    <div
                        className="modelset-content"
                        style={{ flexWrap: 'wrap' }}
                    >
                        <div className="modelset-content-item">
                            <p className="modelset-content-item-title">
                                模型风格
                            </p>
                            <CustomSelect
                                formType="video"
                                fieldName="modelStyle"
                                options={styleOptions}
                                className="model-select"
                                placeholder="模型风格"
                            />
                        </div>
                        <div className="modelset-content-item">
                            <p className="modelset-content-item-title">
                                单次生成个数
                            </p>
                            <CustomSelect
                                formType="video"
                                fieldName="onceGenerateNum"
                                options={numOptions}
                                className="model-select"
                                placeholder="单次生成个数"
                            />
                        </div>

                        {/* <div className="modelset-content-item">
                            <p className="modelset-content-item-title">
                                生成速度
                            </p>
                            <CustomSelect
                                formType="video"
                                fieldName="speed"
                                options={speedOptions}
                                className="model-select"
                                placeholder="生成速度"
                            />
                        </div> */}
                        <div className="modelset-content-item">
                            <p className="modelset-content-item-title">
                                分辨率
                            </p>
                            <CustomSelect
                                formType="video"
                                fieldName="resolution"
                                options={resolutionOptions}
                                className="model-select"
                                placeholder="分辨率"
                            />
                        </div>
                    </div>
                </ExpandableSection>
            </div>
        </div>
    );
};

export default Image2VideoForm;
